<template>
  <div class="box">
    <div class="back" @click="onClickBack">后退</div>
    <div class="regBox">
      <p class="title">HEYTEA</p>
      <input type="text" placeholder="请输入电话号码或者电子邮箱" v-model="telEmail" />
      <span v-text="uMessage"></span>
      <br />
      <input type="text" placeholder="请输入1到6位任意字符昵称" v-model="nickname" @blur="checkName" />
      <span v-text="nicknameMsg"></span>
      <br />
      <input type="password" placeholder="请输入6到16位密码" v-model="userpass" />
      <span v-text="upassMsg"></span>
      <br />
      <input type="text" placeholder="请输入4位数验证码" class="message" v-model="six" />
      <span v-text="get" @click="getCaptcha"></span>
      <br />
      <input type="button" value="注册" class="start" @click="regSave" />
    </div>
  </div>
</template>
<script>
import axios from "../../untils/request";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import "vant/lib/index.css";

export default {
  name:"RegSave",
  data() {
    return {
      telEmail: "", //电话号、邮箱的双向绑定
      uMessage: "", //电话号、邮箱的span
      nickname: "", //昵称的双向绑定
      nicknameMsg: "", //昵称的span
      userpass: "", //密码的双向绑定
      upassMsg: "", //密码的span
      six: "", //验证码双向绑定
      get: "获取验证码" //验证码的span
    };
  },
  methods: {
    //后退按钮
    onClickBack() {
      this.$router.go(-1);
    },
    //注册按钮
    regSave() {
      //手机号
      let reg = new RegExp(/^\d{7,11}$/);
      //电子邮箱
      let reg2 = new RegExp(/^\w{2,10}@\w{2,6}\.(com|cn|net|com.cn)$/);
      //昵称
      let reg3 = new RegExp(/^.{1,6}$/);
      //密码
      let reg4 = new RegExp(/^.{6,16}$/);
      //验证码
      let reg5 = new RegExp(/^\d{4}$/);

      // 非空判断
      if (
        this.telEmail != "" &&
        this.nickname != "" &&
        this.userpass != "" &&
        this.six != ""
      ) {
        //正则验证
        if (
          reg3.test(this.nickname) && //昵称
          reg4.test(this.userpass) && //密码
          reg5.test(this.six) && //验证码
          (reg.test(this.telEmail) || reg2.test(this.telEmail)) //符合手机号或者邮箱任意一个
        ) {
          //打印出发送请求的数据
          console.log("注册的电话号/邮箱：", this.telEmail);
          console.log("注册的昵称：", this.nickname);
          console.log("注册的验证码:", this.six, typeof this.six);
          console.log("注册的密码：", this.userpass);

          // 输入的信息满足正则后就发请求
          axios({
            url: "/user/adduser",
            method: "post",
            data: {
              // telPhone: this.telEmail,//电话号
              // telPhone: "17782682836",
              userName: this.nickname, //昵称
              userPass: this.userpass, //密码
              email: this.telEmail, //邮箱
              code: this.six //验证码
              // ,code:"1234"
            }
          })
            .then(res => {
              console.log("注册请求回来的数据:",res.data);
              if (res.data.code != "0") {
                Toast.fail("注册失败");
              } else {
                Toast.success("恭喜您，注册成功");
              }
            })
            .catch(err => {
              console.log("服务器出现错误！注册失败", err);
            });
        } else {
          console.log("亲，请安规则输入");
        }
      } else {
        console.log("亲，不能为空哦");
      }
    },
    //发送邮箱验证码
    getCaptcha() {
      axios({
        url: "/user/sendEmail",
        method: "post",
        data: {
          email: this.telEmail //邮箱
        }
      })
        .then(res => {
          console.log("请求邮箱验证码回来的数据:",res.data);
          if (res.data.code != "0") {
            Toast.fail("获取验证码失败了");
          } else {
            Toast.success("已经获得了验证码");
          }
        })
        .catch(err => {
          console.log("服务器出现错误了", err);
        });
    },
    //验证用户名（昵称）的唯一性
    checkName() {
      console.log("开始查询用户名的唯一性");
      // console.log(this.nickname);   
      axios({
        url: "/user/checkUserName",
        params: {
          userName: this.nickname
        }
      })
        .then(res => {
          console.log("请求用户名唯一性:",res.data);
          if (res.data.code != "0") {
            this.nicknameMsg=res.data.msg
          } else {
            this.nicknameMsg=res.data.msg
          }
        })
        .catch(err => {
          console.log("服务器出现错误了", err);
        })
    }
  }
}
</script>

<style scoped>
.regBox {
  width: 90%;
  height: 3.8rem;
  /* background-color: blueviolet; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "KaiTi";
  padding-top: 0.6rem;
}
.back {
  height: 0.4rem;
  line-height: 0.4rem;
  text-indent: 5%;
  border-bottom: 0.01rem solid #f1f1f1;
  font-family: "KaiTi";
}
.title {
  font-size: 0.36rem;
  text-align: center;
  margin-bottom: 0.6rem;
  font-family: "STHupo";
}
input {
  width: 2.56rem;
  height: 0.42rem;
  background-color: #f1f1f1;
  font-size: 0.18rem;
  border: none;
  outline: none;
  border-bottom: 0.01rem solid gray;
  margin-bottom: 0.15rem;
  font-family: "KaiTi";
}
.message {
  width: 2rem;
  margin-right: 0.2rem;
}
.start {
  width: 2rem;
  background-color: #f1f1f1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.3rem;
  font-family: "STXinwei";
}
</style>